<template>
  <div class="home">
    <div class="navigator">
      <!-- <div class="logo">
        <el-image :src="logo" />
        <div class="divider"></div>
      </div> -->
      <ul class="nav-items">
        <li v-for="item in navs" :key="item.path">
          <!--          <el-tooltip effect="light" :content="item.title" placement="right">-->
          <!--            -->
          <!--          </el-tooltip>-->
          <a
            @click="changeNav(item)"
            :class="item.path === curPath ? 'active' : ''"
          >
            <el-image :src="item.icon_path" :width="10" v-if="item.icon_path" />
            <i :class="'iconfont icon-' + item.icon" v-else></i>
          </a>
          <div :class="item.path === curPath ? 'title active' : 'title'">
            {{ item.title }}
          </div>
        </li>
      </ul>
      <div class="footer">
        <LoginProfile></LoginProfile>
      </div>
    </div>
    <div class="content">
      <router-view v-slot="{ Component }">
        <transition name="move" mode="out-in">
          <component :is="Component"></component>
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { checkSession } from "@/action/session";
import { isMobile } from "@/utils/libs";
import LoginProfile from "@/components/LoginProfile.vue";
import { ref } from "vue";

const isLogin = ref(true);
const router = useRouter();
const logo = "/images/logo.png";
const navs = ref([
  { path: "/mainpage", icon: "home", title: "主页" },
  { path: "/chat", icon: "wechat", title: "聊天" },
  // {path: "/mj", icon_path: "/images/mj.png", title: "MJ 绘画"},
  { path: "/sd", icon: "menu", title: "绘画" },
  { path: "/apps", icon: "plugin", title: "应用中心" },
  { path: "/images-wall", icon: "image-list", title: "作品展示" },
  {path: "/knowledge", icon: "book", title: "知识库"},
  { path: "/member", icon: "vip-user", title: "会员计划" },
  { path: "/invite", icon: "share", title: "推广计划" },
]);
const curPath = ref(router.currentRoute.value.path);

const changeNav = (item) => {
  curPath.value = item.path;
  router.push(item.path);
};
</script>

<style lang="stylus" scoped>
@import '@/assets/iconfont/iconfont.css';

.home {
  display: flex;
  background-color: #25272D;
  height: 100vh;
  width: 100%;

  .navigator {
    display: flex;
    flex-flow: column;
    width: 70px;
    padding: 10px 6px;
    border-right: 1px solid #3c3c3c;

    .logo {
      display: flex;
      flex-flow: column;
      align-items: center;

      .divider {
        border-bottom: 1px solid #4A4A4A;
        width: 80%;
        height: 10px;
      }
    }

    .footer {
      display: flex;
      flex-flow: column;
      align-items: flex-end;
      margin-top: auto;
    }

    .nav-items {
      margin-top: 20px;
      padding-left: 10px;
      padding-right: 10px;

      li {
        margin-bottom: 15px;

        a {
          color: #DADBDC;
          background-color: #40444A;
          border-radius: 10px;
          width: 48px;
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          .el-image {
            border-radius: 10px;
          }

          .iconfont {
            font-size: 20px;
          }
        }

        a:hover, a.active {
          color: #47fff1;
        }

        .title {
          font-size: 12px;
          padding-top: 5px;
          color: #e5e7eb;
          text-align: center;
        }

        .active {
          color: #47fff1;
        }
      }
    }
  }

  .content {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
  }
}
</style>
